<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶-10 路由练习</title>
    <script src='vue.js'></script>
    <script src="vue-router.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            margin: 0;
        }
        
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 55px;
            line-height: 55px;
            width: 100%;
        }
        
        footer a {
            float: left;
            width: 33.3%;
            border-right: 1px solid gray;
            text-align: center;
            text-decoration: none;
        }
        
        footer a:nth-child(3) {
            border-right: none;
        }
        
        .router-link-active {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id='app'>
        <router-view></router-view>
        <footer v-show="isShow">
            <router-link to="/chat">聊天</router-link>
            <router-link to="/friend">好友</router-link>
            <router-link to="/set">设置</router-link>
        </footer>
    </div>
    <script>
        const chat = {
            template: `<div>
                         <h1>聊天界面</h1>
                         <ul>
                            <li v-for="c in chatlist">
                                <router-link :to="'/detail/' + c.petname ">{{c.petname}}</router-link>
                            </li>
                         </ul>
                       </div>`,
            data: function () {
                return {
                    chatlist: [
                        { petname: '小白', qq: '0000001' },
                        { petname: '小黑', qq: '000002' },
                        { petname: '小兰', qq: '000003' },
                        { petname: '小红', qq: '000004' },
                        { petname: '小青', qq: '000005' }
                    ]
                }
            }
        }
        const friend = {
            template: '<div><h1>好友界面</h1></div>'
        }
        const set = {
            template: '<div><h1>设置界面</h1></div>'
        }

        const detail = {
            template: `<div>
                        <h1><button @click="$router.go(-1)">返回</button>详情页面</h1>
                        <p>$route.params对象中存储的就是动态路由中的动态数据;
                        可以根据参数名取出</p>
                        <p>
                            正在与{{$route.params.petname}}聊天。
                        </p>
                       </div>`,
            created:function(){
                console.log('组件被创建完成了');
            },
            updated:function(){
                console.log('组件更新了');
            },
            methods:{
            }
        }

        const router = new VueRouter({
            routes: [
                { path: '/chat', component: chat },
                { path: '/friend', component: friend },
                { path: '/set', component: set },
                // 动态路由：  冒号后面是参数名
                // 这个参数会被存储在$route.params对象中
                { path: '/detail/:petname', component: detail },
                // redirect:重定向
                { path: '', redirect: '/chat' }
            ]
        })
        new Vue({
            el: '#app',
            data:{
                isShow:true
            },
            router,
            //监视
            watch:{
                // 监视路由的变化
                // to:新路由
                // from：旧路由
                $route:function(to,from){
                    console.log('路由发生变化了');
                    console.log(from);
                    console.log(to);
                    // 根据/拆分路由path
                    // 一般path遵循如下写法 n级页面n个/
                    // 一级页面 /name
                    // 二级页面 /xxx/xxx
                    // 三级页面 /xxx/xxx/xxx

                    // 根据/的数目确定是几级页面
                    var level = to.path.split('/').length-1;
                    console.log(level);
                    console.log(to.path.split('/'));
                    if(level>1){
                        // >1级页面
                        // 隐藏tabs
                        this.isShow = false ;
                    }else{
                        // <= 1级页面
                        // 显示tabs
                        this.isShow = true;
                    }
                }
            }
        })
    </script>
</body>

</html>